<template>
  <div>
    <el-select
    style="width:100%"
      v-model="selectValue"
      :placeholder="placeholder"
      @change="changeSelect"
      clearable
      :multiple='multiple'
      :disabled='disabled'
    >
      <el-option
        v-for="item in selectOptions"
        :key="item.dictValue"
        :label="item.dictLabel"
        :value="item.dictValue"
        :disabled="item.disabled?true:false"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { getDictDataList } from "@/utils";

export default {
  name: "SelectComponent",
  data() {
    return {
      selectOptions: getDictDataList(this.dictType),
      selectValue: "",
    };
  },
  props: {
    options: {
      default: () => {
        return [];
      },
    },
    placeholder:String,
    dictType: String,
    multiple:Boolean,
    disabled:{
      typeof:Boolean,
      default:false
    }
  },
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (newValue && newValue.length > 0) {
          this.selectOptions = newValue;
        }
      },
    },
    selectValue: {
      immediate: true,
      deep: true,
      handler(newValue) {
      },
    },
  },
  methods: {
    changeSelect(e) {
      this.$emit("input", e);
    },
  },
};
</script>

<style scoped lang='scss'>
</style>